<template>
  <el-container class="layout-container-demo">
    <!-- 侧边菜单栏 -->
    <el-aside width="auto" style="background-color: #b5c3c3;height:130vh">
      <!--:collapse="isCollapse"   菜单栏折叠 -->
      <!-- :default-openeds="['1', '3']"   默认展开-->

      <el-col :span="12">
        <el-menu ref="menu" background-color="#b5c3c3" router route class="el-menu-vertical-demo">

          <div class="head">
            <img src="@/assets/title.png" class="head_img">
          </div>

          <el-menu-item index="/homepage">
            <template #title>
              <el-icon>
                <HomeFilled />
              </el-icon>首页
            </template>
          </el-menu-item>

          <el-menu-item index="/pumpList">
            <template #title>
              <el-icon>
                <Shop />
              </el-icon>抽油机档案
            </template>
          </el-menu-item>
          <el-menu-item index="/well">
            <template #title>
              <el-icon>
                <Orange />
              </el-icon>油井档案
            </template>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Checked />
              </el-icon>我的上报
            </template>
            <el-menu-item-group>

              <el-menu-item index="1-2">
                <template #title>
                  <el-icon>
                    <DocumentChecked />
                  </el-icon>每日运转档案上报
                </template>
              </el-menu-item>

              <el-menu-item index="1-1">
                <template #title>
                  <el-icon>
                    <DocumentDelete />
                  </el-icon>事故上报
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <List />
              </el-icon>工作台账
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">
                <template #title>
                  <el-icon>
                    <Tools />
                  </el-icon>维修记录
                </template>
              </el-menu-item>

              <el-menu-item index="2-2">
                <template #title>
                  <el-icon>
                    <Odometer />
                  </el-icon> 保养记录
                </template>
              </el-menu-item>

              <el-menu-item index="2-3">
                <template #title>
                  <el-icon>
                    <Filter />
                  </el-icon> 化验记录
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Avatar />
              </el-icon>用户管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">
                <template #title>
                  <el-icon>
                    <Stamp />
                  </el-icon>用户列表
                </template>
              </el-menu-item>
              <el-menu-item index="3-2">
                <template #title>
                  <el-icon>
                    <Operation />
                  </el-icon>操作记录
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-aside>

    <!-- 顶部信息栏 -->
    <el-container>
      <el-header style="text-align: right; font-size: 12px;background-color:#b5c3c3;">
        <div class="toolbar">
          <div class="foldIcon" style="width:30px">
            <el-icon v-if="!isCollapse" @click="changeMenu">
              <Expand />
            </el-icon>
            <el-icon v-if="isCollapse" @click="changeMenu">
              <Fold />
            </el-icon>
          </div>

          <div @click="drawer = true" class="setting">
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>

            <!-- 个人主页 -->
            <el-drawer v-model="drawer" title="个人中心">
              <div style="border: gray solid 1px; border-radius: 5px; box-shadow: 0 0 5px 1px #999 ">
                <div class="userbcg">
                  <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" class="headimg">
                </div>
                <div style="margin: 10px;text-align: left;">
                  <span style="font-size: 20px;">{{ userName }}</span><br>
                  <div style="color: gray;">
                    <span style="margin-top: 5px;">高高兴兴上班来</span><br>
                    <span style="margin-top: 5px;">平平安安回家去</span>
                  </div>
                </div>


                <div
                  style="text-align: left;display: flex; font-size: 16px;margin-top: 20px;border-top:gray solid 1px ;height: 40px;padding-top: 20px;">
                  <span style="margin-left: 10px;">工号</span>
                  <div style="margin-left:200px ;">
                    <span>{{ userData.number }}</span>
                  </div>
                </div>
                <div
                  style="text-align: left;display: flex; font-size: 16px;margin-top: 20px;border-top:gray solid 1px ;height: 35px;padding-top: 20px;">
                  <span style="margin-left: 10px;">工龄</span>
                  <div style="margin-left:200px ;">
                    <span>{{ userData.workage }}年</span>
                  </div>
                </div>
                <div
                  style="text-align: left;display: flex; font-size: 16px;margin-top: 20px;border-top:gray solid 1px ;height: 40px;padding-top: 20px;">
                  <span style="margin-left: 10px;">所属角色</span>
                  <div style="margin-left:170px ;">
                    <span>{{ userData.role == 0 ? '管理员' : userData.role == 1 ? '石油工人' : userData.role == 2 ? '维修人员' : '化验人员' }}</span>
                  </div>
                </div>
              </div>

              <div class="btns">
                <el-button type="primary" plain @click="changePassword" style="width: 100px;">修改密码</el-button>
                <el-button type="danger" plain style="width: 100px;">退出登录</el-button>
              </div>
            </el-drawer>


            <span class="username">{{ userName }}</span>
          </div>
        </div>
      </el-header>

      <el-dialog v-model="dialogVisible" title="修改密码" width="500">

        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="旧密码">
            <el-input v-model="form.oldPsw" style="width: 240px;margin-top: 5px;" type="password" show-password />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="form.newPsw" style="width: 240px;margin-top: 5px;" type="password" show-password />
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="form.reNewPsw" style="width: 240px;margin-top: 5px;" type="password" show-password />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false" style="width: 70px;">取消</el-button>
            <el-button type="primary" style="width: 70px;" @click="submit">
              提交
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-main>
        <slot name="main"></slot>
      </el-main>

    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { changePsw } from '@/api/user'
import { ref, reactive } from 'vue'
let isCollapse = ref(false);
const drawer = ref(false)
const userName = ref('科比')
const userData = reactive({
  number: ref(2021015455),
  workage: ref(2),
  role: ref(0)
})

function changeMenu() {
  isCollapse.value = !isCollapse.value
}

function changePassword() {
  dialogVisible.value = true
}
const dialogVisible = ref(false)

function submit() {
  if (form.oldPsw == form.newPsw) {
    ElMessage.warning("旧密码不能与新密码相同")
  } else if (form.newPsw != form.reNewPsw) {
    ElMessage.warning("两次输入密码应该一致")
  } else {
    changePsw(form.oldPsw, form.newPsw, userData.number).then(() => {
      ElMessage.success("修改成功")
    }).catch(() => {
      ElMessage.error("修改失败")
    })
  }
  dialogVisible.value = false
}

const form = reactive({
  oldPsw: ref(''),
  newPsw: ref(''),
  reNewPsw: ref('')
})



</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.el-menu-item.is-active {
  background-color: #6c8089 !important;
  color: #fff;

  span {
    color: #fff !important;
  }
}

.head {
  background-image: url('@/assets/logo.png');
  background-repeat: no-repeat;
  background-position: 5px;
  background-size: 35%;
  width: 200px;
  height: 59px;
  background-color: #b5c3c3;
  border-bottom: solid 0.1px gray;
}

.head_img {
  margin-left: 80px;
  margin-top: 1px;
  background-color: #b5c3c3;
  width: 80px;
  border-radius: 50px;
  overflow: hidden;
}

.el-main {
  height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-aside {
  color: #333;
  height: 100%;
}

.foldIcon {
  position: absolute;
  left: 10px;
  font-size: 30px;
  cursor: pointer;
  color: black;

}

.el-aside::-webkit-scrollbar {
  display: none;
}

.setting :hover {
  cursor: pointer;
}

.username {
  font-size: 15px;
  font-family: "微软雅黑"
}

.userbcg {
  background-image: url('@/assets/userBackground.jpg');
  background-repeat: repeat;
  height: 250px;
}

.headimg {
  width: 100px;
  position: relative;
  right: 33%;
  top: 28%;
  display: fixed;
}

.userInfo {
  text-align: left;
  font-size: 15px;
  margin-left: 10px;
  display: flex;
}

.showInfo {
  color: blue;
  text-align: right
}

.btns {
  text-align: left;
  display: flex;
  justify-content: space-between;
  margin-top: 20px
}
</style>